<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
					<span id="span01">aaa</span>
					<span id="span02">aaa</span>
					
					用户名:<input name="username" />
					密码:<input name="password" />
					爱好:
					<input name="like" value="打球" type="checkbox">打球
					<input name="like" value="打游戏" type="checkbox">打游戏
					<input name="like" value="听音乐" type="checkbox">听音乐
					
					<div class="one">块1</div>
					<div class="two">块1</div>
					<div class="one">块1</div>
					<div class="two">块1</div>
				</div>
				
				<script>
					
					// 1. 通过id找元素
					// var span01 = document.getElementById("span01");
					span01.textContent = "你好";
					
					// 2. 通过标签找元素 返回的是一个数组
					var spans = document.getElementsByTagName("span");
					for(var i=0;i<spans.length;i++)
					{
						spans[i].textContent = "哈哈"+i;
					}
					
					// 3. 通过name属性找元素
					var inputs = document.getElementsByName("like");
					for(var i=0;i<inputs.length;i++)
					{
						inputs[i].checked = "checked";
					}
					
					// 4. 通过class属性找元素
					var divs = document.getElementsByClassName("two");
					for(var i=0;i<divs.length;i++)
					{
						divs[i].style.backgroundColor = "red";
					}
					
					// 5. 通过css选择器查找元素
					// querySelect("css选择器")		返回的是符合选择器的第一个元素
					// querySelectAll("css选择器")  返回的是符合选择器的所有元素
					
					var divs = document.querySelectorAll(".one");
					console.log(divs.length);
					for(var i=0;i<divs.length;i++)
					{
						divs[i].style.backgroundColor = "green";
					}
					
				</script>
		
	</body>
</html>
